<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box{
            width: 400px;
            height: 400px;
            border: 10px dashed green;
            background-color: red;
            /*边框圆角半径*/
            border-radius: 210px;
            text-align: center;

        }
    </style>
</head>
<body>
<div id="box" hidden>我很圆</div>
书籍信息
<form id="book">
    书名:<input name="name"><br>
    作者:<input type="button" id="add_author" value="添加作者">
    <input name="author"><br>
</form>

<script>
    var circle = document.getElementById("box")
    // 鼠标下
    circle.onmousedown = function () {
        circle.style.backgroundColor = 'yellow'

    };
    // 鼠标抬起来
    circle.onmouseup = function () {
        circle.style.backgroundColor = 'red'
    }

    // 鼠标滑过 => 从外部 滑动到 内部
    circle.onmouseover = function () {
        circle.style.backgroundColor = 'green';
        circle.style.borderColor = 'red'
    };
    // 鼠标从内部滑动到外部
    circle.onmouseout = function () {
        circle.style.backgroundColor = 'red';
        circle.style.borderColor = 'green'
    }

    circle.onmousemove = function () {
        /*
        innerHTML和innerText 都可以向html标签中添加文本
        区别:
        innerHTML中可以添加html代码,例如p标签就会被渲染出来
        innerText只能添加文本信息,标签也会当做普通文本信息,显示出来
         */
        circle.innerHTML += '啊'
        // circle.innerText = '<p>啊</p>'
        console.log("move");
    }

    var addAuthorBtn = document.getElementById("add_author");
    addAuthorBtn.onclick = function () {
        var bookForm = document.getElementById('book');
        bookForm.innerHTML += '<input name="author"><br>';
    }
</script>


</body>
</html>